<template>
	<view>
		<view class="container p40">
			<template v-if="serviceList.total > 0">
				<template v-for="(item, index) in serviceList.data">
					<view class="service">
						<navigator class="row flex-box pb20 mb20 m-arrow-right" hover-class="none">
							<image class="icon-addr mr10" src="/static/icon/icon_addr.png" mode="aspectFit"></image>
							<view class="flex-grow-1 fs30 col10">{{item.city != 'undefined' && item.city!='' ? item.city : '' }}</view>
							<view class="fs24 col89">服务ID：{{item.id}}</view>
						</navigator>
						<view class="step-row flex flex-align-start mb40">

							<view class="step" v-for="(item1, index1) in item.can_house_state_arr"
								:class="index1==item.house_state?'active':''">
								<image class="icon-step" v-if="index1==0||index1==1" :src="index1==item.house_state?'/static/icon/icon_mservice2_on.png':'/static/icon/icon_mservice2_un.png'" mode="aspectFit"></image>
								<image class="icon-step" v-if="index1==2" :src="index1==item.house_state?'/static/icon/icon_mservice1_on.png':'/static/icon/icon_mservice1_un.png'" mode="aspectFit"></image>
								<image class="icon-step" v-if="index1==3" :src="index1==item.house_state?'/static/icon/icon_mservice0_on.png':'/static/icon/icon_mservice0_un.png'" mode="aspectFit"></image>
								<image class="icon-step" v-if="index1==4" :src="index1==item.house_state?'/static/icon/icon_mservice4_on.png':'/static/icon/icon_mservice4_un.png'" mode="aspectFit"></image>
								<image class="icon-step"  v-if="index1==5" :src="index1==item.house_state?'/static/icon/icon_mservice5_on.png':'/static/icon/icon_mservice5_un.png'" mode="aspectFit"></image>
								<image class="icon-step"  v-if="index1==6" :src="index1==item.house_state?'/static/icon/icon_mservice6_on.png':'/static/icon/icon_mservice6_un.png'" mode="aspectFit"></image>
								<view>{{item1}}</view>
							
							</view>

						
						</view>
			
					</view>

				</template>
				<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
					nomore-text="没有更多了" />
			</template>
			<template v-else>
				<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
				</u-empty>
			</template>
		</view>

	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				// 房源列表
				serviceList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
				loadStatus: 'loadmore', //加载状态
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */

		onLoad: function(options) {
			this.initData();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {
			if (this.serviceList.current_page >= this.serviceList.last_page) {
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getServiceList();
			}
		},
		methods: {
			// 获取房源列表信息
			getServiceList: function() {
				var that = this;
				var json = {

				};
				json.page = Number(that.serviceList.current_page) + 1;

				if (json.page > 1 && that.serviceList.current_page >= that.serviceList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse.house/my_appoint_log_list', json, function(res) {
					var serviceList = res.data;
					console.log(res)

					if (json.page > 1) {
						var now_serviceList_data = that.serviceList.data || [];
						var now_serviceList_data = now_serviceList_data.concat(serviceList.data);
						serviceList.data = now_serviceList_data;
					}
					console.log(serviceList)
					that.serviceList = serviceList;
					console.log(that.serviceList)

				});
			},
			jumpToPages(event) {
				var that = this;
				var jump_type = Number(event.currentTarget.dataset.jump_type);
				var url = event.currentTarget.dataset.url;

				app.globalData.nowThat = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//data-id="item.id" data-house_state="item.house_state"
						var id = event.currentTarget.dataset.id;
						var house_state = event.currentTarget.dataset.house_state;
						uni.navigateTo({
							url: url + '?id=' + id + '&house_state=' + house_state
						});
					} else {
						functions.toast('请先登录');
					}
				});

			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.serviceList.current_page = 0;
				// 获取该城市的房源列表

				that.getServiceList();
			}

		}

	};
</script>

<style lang="scss" scoped>
	.service {
		margin-bottom: 30rpx;
		padding: 30rpx 30rpx 35rpx;
		background: #ffffff;
		box-shadow: 0 4rpx 30rpx 0 rgba(184, 189, 202, 0.3);
		border-radius: 10rpx;
	}

	.service .row {
		border-bottom: 1rpx solid#F4F3F3;
	}

	.service .row:after {
		margin-top: -18rpx;
	}

	.service .icon-addr {
		display: block;
		width: 25rpx;
		height: 31rpx;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
	}

	.service .step {
		position: relative;
		font-size: 24rpx;
		color: var(--arrow);
		text-align: center;
		white-space: nowrap;
	}

	.service .step.active {
		color: var(--blue);
	}

	.service .step+.step {
		margin-left: 50rpx;
	}

	.service .icon-step {
		margin: 0 auto 15rpx;
		display: block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.service .icon-arr {
		position: absolute;
		left: -33rpx;
		top: 35rpx;
		display: block;
		width: 13rpx;
		height: 11rpx;
	}

	.service .nav1 {
		margin: 0 auto;
		width: 340rpx;
		height: 70rpx;
		background: #0091FF;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
	}
</style>
